import { BaseChildrenProps } from "@/types/baseProps";
import { MutableRefObject, ReactNode } from "react";
import { IconType } from "../../UI/MyIcon";
import { SetFn } from "@/types";



/**允许的文件类型。这里要填浏览器type中的值。 待补充， 可以看 https://www.w3cschool.cn/htmltags/att-input-accept.html */
export enum Mime {
  /**PNG图片类型 */
  PNG = "image/png",
  /**JPG图片类型 */
  JPG = "image/jpeg",
  /**GIF图片类型 */
  GIF = "image/gif",
  /**SVG图片类型 */
  SVG = "image/svg+xml",

  /**所有图片类型 */
  image = "image/*",
  /**所有视频类型 */
  video = "video/*",
  /**所有音频类型 */
  audio = "audio/*",

  /**表格类型1 - xls xlc等xl开头的 （如果需要限制所有表格，需要把1和2都写上） */
  Eecel1 = "application/vnd.ms-excel",
  /**表格类型2 - xlsx （如果需要限制所有表格，需要把1和2都写上） */
  Eecel2 = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",

  /**文本类型 */
  TXT = "text/plain",
  /**以.wav为后缀的音频文件 */
  WAV = "audio/wav",



  //没有type的，才用下面的这种后缀类型：

  /**glb类型 */
  GLB = ".glb",

}
/**分辨率限制 */
export interface JudgeRatio {
  /**图片/视频的最大宽度限制 */
  maxWidth?: number
  /**图片/视频的最大高度限制*/
  maxHeight?: number
  // /**16:9 长:宽 */
  /**限制长宽比例 长:宽*/
  scale?: number
}


/**文件上传组件的props */
export interface UploadProps extends BaseChildrenProps {
  /**允许的文件类型。数组形式表示允许多个。  */
  allowType?: Array<Mime>;
  /**文件的最大大小，单位MB */
  maxSize?: number
  // /**文件的最多个数， 默认1 （暂时没做真正的限制）*/
  // maxCount?: number
  /**请求路径。如果不是想 beforeUpload 自己上传 或分片上传 的话，就要填这个*/
  url?: string
  /**是否禁用上传 */
  disabled?: boolean
  /**是否允许多选 */
  multiple?: boolean
  /**校验图片的宽高，不传递则不校验  （不是图片请勿传递） */
  judgeImageRatio?: JudgeRatio
  /**校验视频的宽高，不传递则不校验  （不是视频请勿传递） */
  judgeVideoRatio?: JudgeRatio

  /**允许的文件类型的文字提示，默认为 只允许xxx类型 （未传入children时展示）  */
  allowTypeTip?: string
  /**文件最大大小的文字提示，默认为 最大{maxSize}MB （未传入children时展示）*/
  maxSizeTip?: string
  /**禁用时的文字提示 */
  disabledTip?: string
  /**上传图标ReactNode，默认是一个云朵。支持自定义颜色等 （未传入children时展示） */
  icon?: ReactNode
  /**上传图标的函数式组件。 沿用默认配置。 优先级 icon 更高 （未传入children时展示） */
  Icon?: IconType
  /**提示文字，默认为“点击或拖拽上传” （未传入children时展示） */
  placeholder?: ReactNode


  /**上传前的回调。返回值为false的话，将会阻止本组件的默认上传行为。
   * -  若return了false，如果还需要用到files文件，需要自行保存下来 （因为**files文件内容会丢失**，推测 是因为检测到没有引用，被垃圾清除机制回收）
   * @param files 
   * @param setOwnFileName 在上传前，自定义上传成功后返回的文件路径名（仅能改服务器路径名后面的部分）
  */
  beforeUpload?: (files: FileList, setOwnFileName: (ownFileName: string[]) => void) => ((boolean | void) | Promise<boolean | void>);
  /**上传成功的回调，参数是本次请求结果。分片上传结果为路径 */
  onSuccess?: (info: any) => any
  /**上传失败的回调 */
  onFail?: (err: any) => any


  /**是否进行分片上传。注：分片上传的请求url是固定的，且只支持同时上传一个 */
  needSlice?: boolean
  /**分片上传时，目标存储路径，不填写将存储在 other 目录下。 不需要带文件名 。一般填模块id名， 最前面别加斜杠！*/
  targetPath?: string
  /**分片的大小。默认2MB */
  sliceSize?: number
}
/**文件上传组件的Ref*/
export interface UploadRef {
  /**组件内的自带上传函数。 如果你在beforeUpload函数中返回了false，但是后面又想在进行其它操作后继续上传，就可以调用这个函数，传入fileList进行上传。 上传成功后会执行传入的onSuccess函数
   * @return 如果是分片上传，返回的是路径string。其它上传根据接口情况自行判断
   */
  upload: <T = any>(files: FileList | File[]) => Promise<T>
  /**终止分片上传 （普通上传暂不支持） */
  stop: () => void
}



/**没填写孩子时，默认的孩子样式 的props */
export interface DefaultChildrenProps extends UploadProps {
  /**是否展示自定义孩子模块 */
  show: boolean
}

/**上传时的进度条部分的props */
export interface UploadProgressProps {
  /**是否展示进度条模块 */
  showprogress: boolean
  /**进度条进度 ，小于0显示错误，大于100显示成功*/
  progress: number
  /**进度条下方的提示 */
  tip: string
  /**是否是分片上传 */
  needSlice: boolean
  /**点击取消上传按钮 */
  stop: () => any
}